<template>
  <div class="box2">
    <div class="title">
      <p>年龄比列</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <!-- 图形 -->
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
// 引入echarts
import * as echarts from "echarts";
let charts = ref();

// 挂载的时候
onMounted(() => {
  initCharts();
});

const initCharts = () => {
  let myChart = echarts.init(charts.value);

  let option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      right: 30,
      top: 40,
      orient: "vertical", //图列组件方向
      textStyle: {
        color: "white",
        fontSize: 14,
      },
    },
    series: [
      {
        name: "数据",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "inside",
          color: "white",
        },

        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "军事" },
          { value: 735, name: "新闻" },
          { value: 580, name: "娱乐" },
          { value: 484, name: "直播" },
          { value: 300, name: "财经" },
        ],
      },
    ],
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
  };
  myChart.setOption(option);
};
</script>

<style scoped lang="scss">
.box2 {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  margin: 20px 0px;

  .title {
    margin-left: 20px;

    p {
      color: white;
      font-size: 20px;
    }
  }

  .charts {
    width: 100%;
    height: 240px;
  }
}
</style>
